const path = require("path");
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.(txt|md)$/, // 正则表达式 ，遇到 .txt 或者是 .md的文件 使用 raw-loader 处理
        use: 'raw-loader'
      },
      {
        test: /\.m?js$/,  // 后缀是  js 或者是 mjs 通过 babel-loader 处理
        exclude: /node_modules/,  // 排除 node_modules 目录
        use: {
          loader: 'babel-loader',  //使用 babel-loader 处理 
          options: {  // 是babel-loader的配置项
            presets: [
              ['@babel/preset-env', { targets: { chrome: "58", ie: "11" } }] // 需要把js转成 chrome 58  ie 11  可以支持的语法 
            ]
          }
        }
      },
      {
        test: /\.(png|jpe?g|gif)$/,  // 处理的文件后缀
        use: {
          loader: "url-loader",  // 使用 url-loader
          options: {  // url-loader的配置项
            // placeholder 占位符 [name] 源资源模块的名称
            // [ext] 源资源模块的后缀
            name: "[name]_[hash].[ext]", // 打包之后 图片的名称
            //打包后的存放位置
            outputPath: "./images", // 输出图片的路径
            // 打包后文件的 url
            publicPath: './images',  // 引入 图片的路径
            // 小于 100 字节转成 base64 格式 ： 利用字符串 描述图片的所有像素点。
            limit: 100
          }
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.less$/i,
        use: [
          //use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
          "style-loader",
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}